<template>
  <scroll-view class="scroll-box" scroll-y :refresher-enabled="mergedProps.refresher" :refresher-triggered="triggered"
               refresher-threshold="45" refresher-background="none" @scrolltoupper="upper" @scrolltolower="lower"
               @refresherrefresh="onRefresh">
    <view class="list_scroll">
      <view v-for="(item, index) in mergedProps.taskList" :key="index" class="list_cell"
            @click="handleItemClick(index, item)">

        <view class="top-view">
          <eui-uicons v-if="showIcon(item)?.show" size='28' fontFamily="enjoyIcon5"
                      :customPrefix="showIcon(item)?.icon" :color="showIcon(item)?.iconColor" />
          <text class="time-title-text" :style="{color:getTimeTitleColor(item)}">{{ item.c_time }}分钟</text>
          <view class="date-view">
            <text
                class="date-text">{{ dayjs(item.c_plan_begin_time).format('MM-DD HH:mm') }} ~ {{ dayjs(item.c_require_complete_time).format('MM-DD HH:mm') }}</text>
          </view>

          <view class="temple-view" />
          <view class="top-right">
            <eui-tag v-if="item.c_level_name==='初级'" type="primary" :text="item.c_level_name" plain
                     plainFill :showBorder="false"></eui-tag>
            <eui-tag v-if="item.c_level_name==='中级'" type="warning" :text="item.c_level_name" plain
                     plainFill :showBorder="false"></eui-tag>
            <eui-tag v-if="item.c_level_name==='高级'" type="error" :text="item.c_level_name" plain plainFill
                     :showBorder="false"></eui-tag>

            <eui-tag v-if="item.c_class_name" :text="item.c_class_name" :bgColor="themeColor"
                     :color="themeColor" :borderColor="themeColor" plain plainFill :showBorder="false"></eui-tag>
          </view>

        </view>
        <view class="center-view">
          <eui-uicons v-if="item.c_timeliness==='T1'" size='28' fontFamily="enjoyIcon5"
                      customPrefix="icon-jinji1" color="#FF4000" />
          <view class="title-view" :style="{marginLeft:item.c_timeliness!=='T1'?'0rpx':'8rpx'}">
            {{ item.c_title }}
          </view>
        </view>
        <view class="content-view">
          {{ item.c_depiction }}
        </view>
        <view class="bottom-view">
          <eui-tag v-if="item.c_recv_adno_name" :text="item.c_recv_adno_name" :bgColor="themeColor"
                   :color="themeColor" :borderColor="themeColor" plain plainFill></eui-tag>
          <eui-tag v-if="item.c_importance_name==='一般'" type="primary" :text="item.c_importance_name" plain
                   plainFill :showBorder="false"></eui-tag>
          <eui-tag v-if="item.c_importance_name==='比较重要'" type="warning" :text="item.c_importance_name" plain
                   plainFill :showBorder="false"></eui-tag>
          <eui-tag v-if="item.c_importance_name==='重要'" type="error" :text="item.c_importance_name" plain
                   plainFill :showBorder="false"></eui-tag>

        </view>
        <eui-line></eui-line>
        <view class="footer-bottom-button-view">
          <view class="footer-bottom-button-view__left-view">
            <view class="footer-bottom-button-view__left">
              <view class="more-option">
                <view v-if="mergedProps.industryTabIndex === 1" @click.stop="disagreeTask(item)">
                  <view style="margin-bottom: 10rpx;">
                    <eui-uicons size='32' fontFamily="enjoyIcon5" color="#000000"
                                customPrefix="icon-quxiao" />
                  </view>
                  <view class="footer-bottom-button-view__text">驳回</view>
                </view>
                <view v-else @click.stop="ToggleMoreOption(item)">
                  <view style="margin-bottom: 10rpx;">
                    <eui-uicons size='32' fontFamily="enjoyIcon5" color="#000000"
                                customPrefix="icon-gengduo2" />
                  </view>
                  <view class="footer-bottom-button-view__text">更多</view>
                </view>
                <view class="more-option-content" v-show="item.shouMore">
                  <view class="more-option-ul">
                    <view v-for="(moreItem, index2) in showButton(item)?.moreText " :key="index2" class="more-option-list" @click.stop="leftItemClick(moreItem.text,item)">{{moreItem.text}}
                    </view>
                  </view>
                  <view class="triangle-down"></view>
                </view>
              </view>
            </view>
            <!-- <view class="footer-bottom-button-view__left"  style="margin-left: 10rpx;"
              @click.stop="leftItemClick(showButton(item)?.iconText,item)">
              <view style="margin-bottom: 10rpx;">
                <eui-uicons size='32' fontFamily="enjoyIcon5" color="#000000"
                  :customPrefix="showButton(item)?.icon" />
              </view>
              <view class="footer-bottom-button-view__text">{{showButton(item)?.iconText}}</view>
            </view> -->
          </view>
          <view class="center-style" style="margin-left: 10rpx;">
            <eui-button type="primary" :useCustom="true" :fontColor="showButton(item)?.fontColor" :borderColor="showButton(item)?.borderColor"
                        :buttonColor="showButton(item)?.buttonColor" :title="showButton(item)?.buttonText"
                        @buttonClick="buttonClick(showButton(item)?.buttonText,item)"></eui-button>
            <!-- <eui-button v-if="showButton('抢单',item)" type="primary" title="抢单" @buttonClick="buttonClick('抢单',item)" ></eui-button>
            <eui-button v-if="showButton('开始处理',item)" type="primary" title="开始处理" @buttonClick="buttonClick('开始处理',item)"></eui-button>
            <eui-button v-if="showButton('正在转单处理',item)" type="primary" title="正在转单处理" @buttonClick="buttonClick('正在转单处理',item)"></eui-button>
            <eui-button v-if="showButton('领取转单',item)" type="primary" title="领取转单" @buttonClick="buttonClick('领取转单',item)"></eui-button>
            <eui-button v-if="showButton('已完成',item)" type="primary" title="已完成" @buttonClick="buttonClick('已完成',item)"></eui-button> -->
          </view>

        </view>

      </view>
    </view>
  </scroll-view>
</template>


<script setup lang="ts">
import { ref, computed } from 'vue';
import dayjs from 'dayjs';
import { useMainStore } from "@/store/modules/store";
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const themeColor = ref(theme._object.theme == 'theme-blue' ? '#02B7E6' : '#FF6430')

const props = defineProps<{
  taskList ?: Array<any>;
  industryTabIndex ?: number;
  refresher ?: boolean;
}>();
const emit = defineEmits(["upper", "lower", "onRefresh", "changeWebview", 'ItemClick', "leftItemClick", "buttonClick"]);
const mergedProps = computed(() => {
  return {
    refresher: props.refresher,
    industryTabIndex: props.industryTabIndex,
    taskList: props.taskList
  };
});

const triggered = ref(false);
const freshing = ref(false);
const mainStore = useMainStore();
const { loginInfo } = mainStore;

const ToggleMoreOption = (item) => {
  props.taskList = props.taskList.map(x => {
    if (item.c_guid === x.c_guid) {
      x.shouMore = !item.shouMore;
    }
    else{
      x.shouMore = false;
    }
    return {
      ...x
    }
  })
}
const getTimeTitleColor = (item) => {
  let color = "#02B7E6";
  if (!item.hasOwnProperty('c_recv_userno')) {
    if (item.c_delay_status !== '2' && item.c_delay_status !== '4') {
      color = "#02B7E6";
    }
    if (item.c_delay_status === '2' || item.c_delay_status === '4') {
      color = "#FF4000";
    }
  }
  else {
    if (item.c_delay_status !== '2' && item.c_delay_status !== '4') {
      color = "#FF7E00";
    }
    if (item.c_delay_status === '2' || item.c_delay_status === '4') {
      color = "#FF4000";
    }
  }
  return color;
}
const showButton = (item) => {
  let buttonInfo = {
    iconText: '',
    buttonText: '',
    buttonColor: '',
    fontColor: '#FFFFFF',
    borderColor: '',
    icon: '',
    moreText: [],
    c_guid: item.c_guid
  }
  if (mergedProps.value.industryTabIndex === 1) {
    buttonInfo.buttonText = "领取转单";
    buttonInfo.buttonColor = '#FFFFFF';
    buttonInfo.fontColor = '#02B7E6';
    return buttonInfo;
  }
  if (!item.hasOwnProperty('c_recv_userno')) {
    if (item.c_distribute_mode === 'D0') {
      buttonInfo.buttonText = "指派";
      buttonInfo.buttonColor = '#017EFF';
      buttonInfo.moreText = [{text:'置顶'},{text:'延时'}]
    }
    else if (item.c_distribute_mode === 'D2') {
      buttonInfo.buttonText = "抢单";
      buttonInfo.buttonColor = '#FF4000';
      buttonInfo.moreText = [{text:'置顶'},{text:'延时'}]
    }
    else {
      //自动分配
      buttonInfo.buttonText = "置顶";
      buttonInfo.buttonColor = '';
      buttonInfo.moreText = [{text:'延时'}]
    }
    // buttonInfo.iconText = "延时";
    // buttonInfo.icon = "icon-yanshi";
    //buttonInfo.moreText = [{text:'置顶'},{text:'延时'}]
    // if(item.c_delay_status!=='2'&&item.c_delay_status!=='4'){
    // 	if(item.c_distribute_mode==='D0'){
    // 		buttonInfo.buttonText = "指派";
    // 		buttonInfo.buttonColor = '#017EFF';

    // 	}
    // 	else if(item.c_distribute_mode==='D2'){
    // 		buttonInfo.buttonText="抢单";
    // 		buttonInfo.buttonColor = '#FF4000';
    // 	}
    // 	else{
    // 		buttonInfo.buttonText="置顶";
    // 		buttonInfo.buttonColor = '';
    // 	}
    // 	buttonInfo.iconText = "延时";
    // 	buttonInfo.icon = "icon-yanshi";
    // }
    // if(item.c_delay_status==='2'|| item.c_delay_status==='4'){
    // 	buttonInfo.iconText="延时";
    // 	buttonInfo.icon = "icon-yanshi";
    // 	buttonInfo.buttonText="置顶";
    // 	buttonInfo.buttonColor = '';
    // }
  }
  else {
    if (item.c_recv_userno) {
      if (item.c_progress === 0) {
        //当前登录人=item.c_recv_userno
        buttonInfo.buttonText = "开始处理";
        buttonInfo.buttonColor = 'linear-gradient( 135deg, #02B7E6 0%, #36A9F3 100%)';
        // buttonInfo.iconText = "转单";
        // buttonInfo.icon = "icon-zhuandan";
        buttonInfo.moreText = [{text:'转单'},{text:'置顶'},{text:'延时'}]
        // buttonInfo.moreText = ['转单','置顶', '延时']
      }
      else {
        buttonInfo.buttonText = "已完成";
        buttonInfo.buttonColor = '#00AD60';
        // buttonInfo.iconText = "延时";
        // buttonInfo.icon = "icon-yanshi";
        // buttonInfo.moreText = ['置顶', '延时']
        buttonInfo.moreText = [{text:'置顶'},{text:'延时'}]
      }
    }
  }
  return buttonInfo;
}


const showIcon = (item) => {
  let iconInfo = {
    show: false,
    icon: '',
    iconColor: ''
  }
  if (!item.hasOwnProperty('c_recv_userno')) {
    if (item.c_delay_status !== '2' && item.c_delay_status !== '4') {
      iconInfo.show = true;
      iconInfo.icon = 'icon-yugu';
      iconInfo.iconColor = '#02B7E6';
    }
    else {
      if (item.c_delay_status === '4') {
        iconInfo.show = true;
        iconInfo.icon = 'icon-jingbao';
        iconInfo.iconColor = '#FF4000';
      }
    }
  }
  else {
    if (item.c_delay_status === '2' || item.c_delay_status === '4') {
      iconInfo.show = true;
      iconInfo.icon = 'icon-jingbao';
      iconInfo.iconColor = '#FF4000';
    }
    else {
      iconInfo.show = item.c_recv_userno === loginInfo.sUser && item.c_delay_status !== '2' && item.c_delay_status !== '4';
      iconInfo.icon = 'icon-shijian2';
      iconInfo.iconColor = '#FF7E00';
    }
  }
  return iconInfo;
}
const onRefresh = (e) => {
  if (freshing.value) return;
  freshing.value = true;
  if (!triggered.value) {//界面下拉触发，triggered可能不是true，要设为true
    triggered.value = true;
    emit("onRefresh", e)
  }
  setTimeout(() => {
    triggered.value = false;//触发onRestore，并关闭刷新图标
    freshing.value = false;
  }, 3000)
}
const upper = (e) => {
  emit('upper', e)
}
const lower = (e) => {
  emit('lower', e)
}
const leftItemClick = (type, item) => {
  props.taskList = props.taskList.map(x => {
    if (item.c_guid === x.c_guid) {
      x.shouMore = !item.shouMore;
    }
    else{
      x.shouMore = false;
    }
    return {
      ...x
    }
  })
  emit('leftItemClick', { type, item });
}
const handleItemClick = (index : number, item : any) => {
  emit('ItemClick', item);
}
const buttonClick = (type, item) => {
  props.taskList = props.taskList.map(x => {
    x.shouMore = false;
    return {
      ...x
    }
  })
  emit('buttonClick', { type, item });
}

//驳回
const disagreeTask = (item: any) => {
  emit('buttonClick', { type: "驳回转单", item });
}
</script>

<style lang="scss" scoped>
@import '../../../../main.scss';
@import '../../../../static/font/enjoyicon5.0/iconfont.css';

.scroll-box {
  height: 100%;
}

.list_scroll {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  flex-direction: column;
}

.list_cell {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;
  background: $uni-bg-color-inverse;
  border-radius: 20rpx;
  margin: 0 20rpx 20rpx 20rpx;
  padding: 28rpx 28rpx 16rpx 28rpx;
  overflow: hidden;
}

.list-cell-item {
  display: flex;
  flex: 1;
}

//顶部行
.top-view {
  display: flex;
  width: 100%;
  height: 46rpx;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.center-view {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12rpx;
}

.bottom-view {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 23rpx;
  //margin-left: 20rpx;
}

.bottom-button-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0rpx 0rpx 0rpx;

  &__left {
    text-align: center;
  }

  &__right {
    margin-left: 42rpx;
  }

  &__text {
    font-family: $uni-font-family;
    color: #000000;
    font-size: 16rpx;
    line-height: 22rpx;
    font-style: normal;
  }
}

.footer-bottom-button-view {
  width: 100%;
  // position: fixed;
  // bottom: 0;
  // height: 100rpx;
  background: #FFFFFF;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  padding: 16rpx 0rpx;

  &__left-view {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;
  }

  &__left {
    text-align: center;
  }

  &__right {
    margin-left: 42rpx;
  }

  &__text {
    font-family: $uni-font-family;
    color: #000000;
    font-size: 16rpx;
    line-height: 22rpx;
    font-style: normal;
  }
}

.center-style {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  //gap: 20rpx;
}
.top-right {
  margin-right: -28rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.title-view {
  display: flex;
  width: 100%;
  font-size: 28rpx;
  line-height: 39rpx;
  font-weight: blod;
  flex-direction: row;
  align-items: center;
  margin-left: 8rpx;
}

.content-view {
  font-size: 20rpx;
  line-height: 30rpx;
  color: #888888;
  margin-bottom: 20rpx;
  text-align: justify;
  font-style: normal;
}

.time-title-text {
  font-family: $uni-font-family;
  color: #02B7E6;
  font-weight: 500;
  font-size: 20rpx;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;
  margin-top: 0;
  margin-left: 8rpx;
}


.date-view {
  display: flex;
  justify-content: center;
  align-items: center;
  // height: 32rpx;
  margin: 0 0rpx 0 12rpx;
}

.date-text {
  font-family: $uni-font-family;
  font-size: 20rpx;
  font-weight: 400;
  color: #888888;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;
}

.temple-view {
  flex: 1;
}

.more-option {
  position: relative;
}

.more-option-content {
  position: absolute;
  background-color: #fff;
  font-size: 13px;
  width: max-content;
  bottom: 40px;
  border-radius: 10px;
  color: #333;
  box-shadow: 0px 0px 10px rgba(136, 136, 136, 0.5);
  text-align: center;
  left: -8px;
  z-index: 9999;

  .triangle-down {
    position: absolute;
    width: 0px;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid white;
    z-index: 1;
    bottom: -9px;
    left: 10px;
  }
}

.more-option-content2 {
  position: absolute;
  background-color: #fff;
  font-size: 13px;
  width: max-content;
  top: 32px;
  border-radius: 10px;
  color: #333;
  box-shadow: 0px 0px 10px rgba(136, 136, 136, 0.5);
  text-align: center;
  left: -8px;
  z-index: 9999;

  .triangle-down {
    position: absolute;
    width: 0px;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid white;
    z-index: 1;
    top: -10px;
    left: 10px;
  }
}

.more-option-ul {
  padding: 0px 18rpx;
}

.more-option-list {
  padding: 15rpx 0px;
  font-size: 30rpx;
  border-bottom: solid 1px rgba(238, 238, 238, 1);
}

.more-option-list:last-child {
  border-bottom: none;
}
</style>
